<template>
	<view class="list">
		<view class="all">
			<uni-icons @tap='allSele' :type="all?'checkbox-filled':'checkbox'" size="24"
				:color="all?'#e43320':'#c8c7cc'"></uni-icons>
			<text>全选</text>
			<text>已选{{num}}人</text>
			<view class="confirm" @tap='confirm'>确定</view>
		</view>
		<!-- 按组使用 -->
		<uni-swipe-action>
			<uni-swipe-action-item style="margin-bottom: 20rpx;" v-for='(item,index) in swiperArr'
				:right-options="options" @click="bindClick(item.id)">
				<view class="itemBox">
					<view class="item">
						<view class="left">
							<uni-icons @tap='select(index)' :type="item.check?'checkbox-filled':'checkbox'" size="24"
								:color="item.check?'#e43320':'#c8c7cc'"></uni-icons>
						</view>
						<view class="right">
							<view class="top">
								<text class="name">{{item.name}}</text>
								<text class="tel">{{item.mobile}}</text>
							</view>
							<view class="bumen">{{item.department}}</view>
						</view>
						<view class="edit" @tap='edit(item.id)'>
							<image src='/static/images/edit.png'></image>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
		<!-- 编辑/创建提报人 -->
		<uni-popup ref="popup" :animation="true" type="center" backgroundColor="#fff" :mask-click="false">
			<view class="editItem">
				<view class="top">
					<text>{{title}}</text>
					<uni-icons @tap='closePopup' type="close" size="24" color="c8c7cc"></uni-icons>
				</view>
				<uni-forms class="bottom" :rules="rules" :value="formData" ref="form" validate-trigger="bind"
					err-show-type="undertext">
					<uni-forms-item name="name" required label="姓名" labelWidth="100">
						<uni-easyinput :clearable='false' type="text" :inputBorder="true" v-model="formData.name"
							placeholder="最多十字符(必填)" maxlength="10"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item required name="mobile" label="联系电话" labelWidth="100">
						<uni-easyinput :clearable='false' type="text" :inputBorder="true" v-model="formData.mobile"
							placeholder="11位数字(必填)" maxlength="11"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="department" label="所属部门" labelWidth="100">
						<uni-easyinput :clearable='false' type="text" :inputBorder="true" v-model="formData.department"
							placeholder="选填"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<view class="footer">
					<view @click='save'>保存</view>
				</view>
			</view>
		</uni-popup>
		<view class="establish" @tap='establish'>创建提报人</view>
	</view>
</template>

<script>
	var util = require("../../../utils/util.js");
	var http = require("../../../utils/http.js");
	export default {
		data() {
			return {
				title: '', //弹框标题
				num: 0, //已选多少人
				all: false, //是否全选
				swiperArr: [ //提报人数组
				],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#e43320'
					}
				}],
				formData: {
					name: '',
					mobile: '',
					department: ''
				},
				rules: {
					name: {
						rules: [{
							required: true,
							errorMessage: '请输入姓名'
						}]
					},

					mobile: {
						rules: [{
								required: true,
								errorMessage: '请输入电话'
							},
							{
								format: 'number',
								errorMessage: '请输入数字'
							}
						]
					},
				},
				seleArr: [],
				editId: '',
			}
		},
		onShow() {
			this.getTb()
		},
		methods: {
			//删除
			bindClick(id) {
				var param = {
					url: "/p/cp/submit/person/delete/" + id,
					method: "DELETE",
					data: {},
					callBack: res => {

						uni.showToast({
							title: '删除成功',
							icon: 'none'
						})
						let that = this
						setTimeout(function() {
							that.$refs.popup.close()
						}, 2000)
						this.getTb()
					}
				};
				http.request(param);
			},

			//获得提报list
			getTb() {
				uni.showLoading()
				var param = {
					url: "/p/cp/submit/person/info",
					method: "GET",
					data: {},
					callBack: res => {
						uni.hideLoading();
						this.swiperArr = res.map(item => {
							return {
								...item,
								check: false
							}
						})
						console.log(res)
					}
				};
				http.request(param);
			},
			//确定选择
			confirm() {
				// console.log(this.seleArr)
				var pages = getCurrentPages(); // 获取页面栈
				var prevPage = pages[pages.length - 2]; // 上一个页面
				console.log(pages)
				prevPage.$vm.previousData(this.seleArr); //重点$vm
				uni.navigateBack({
					delta: 1
				})
			},
			//保存编辑框
			save() {
				if(!util.checkPhoneNumber(this.formData.mobile)){
					uni.showToast({
						title:'电话格式不正确',
						icon:'none'
					})
					return
				}
				this.$refs.form
					.submit()
					.then(res => {
						console.log(this.editId)
						var param = {
							url: this.editId ? "/p/cp/submit/person/update" : "/p/cp/submit/person/add",
							method: this.editId ? "PUT" : "POST",
							data: this.formData,
							callBack: res => {
								uni.showToast({
									title: this.editId ? '修改成功' : '保存成功',
									icon: 'none'
								})
								let that = this
								setTimeout(function() {
									that.$refs.popup.close()
									
								}, 500)
								this.getTb()
							}
						};
						http.request(param);


					})
					.catch(errors => {
						console.error('验证失败：', errors)
					})
			},
			//编辑提报人
			edit(id) {
				this.$refs.popup.open()
				this.title = '编辑提报人'
				this.editId = id
				if (id) {
					//获取提报人详情
					this.getTbDes(id)
				}
			},
			//获取提报人详情
			getTbDes(id) {
				var param = {
					url: "/p/cp/submit/person/info/" + id,
					method: "GET",
					data: {},
					callBack: res => {

						this.formData.name = res.name
						this.formData.mobile = res.mobile
						this.formData.department = res.department
						this.formData.id = res.id
					}
				};
				http.request(param);
			},
			//创建提报人
			establish() {
				this.$refs.popup.open()
				this.title = '创建提报人'
				this.editId = ''
				for (let key in this.formData) {
					this.formData[key] = ''
				}
			},
			//关闭弹框
			closePopup() {
				this.$refs.popup.close()
			},
			//选中
			select(index) {
				this.swiperArr[index].check = this.swiperArr[index].check ? false : true
				let arr = this.swiperArr.filter(item => {
					return item.check
				})
				this.seleArr = arr
				this.num = arr.length
				console.log(this.seleArr)
			},
			//是否全选
			allSele() {
				this.all = !this.all
				this.swiperArr.forEach(item => {
					item.check = this.all
				})

				if (this.all) {
					for (var i = 0; i < this.swiperArr.length; i++) {
						this.swiperArr[i].check = true
					}
					this.seleArr = this.swiperArr
					this.num = this.swiperArr.length
				} else {
					this.num = 0
				}
			},
		}
	}
</script>

<style lang='scss'>
	view,
	text,
	uni-swipe-action-item {
		box-sizing: border-box;
		line-height: 1;
		color: #333;
	}

	.establish {
		width: 750rpx;
		height: 90rpx;
		background-color: #e43320;
		color: #fff;
		font-size: 32rpx;
		font-weight: 600;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;
	}

	.footer {
		display: flex;
		justify-content: flex-end;

		view {
			padding: 20rpx 40rpx;
			background-color: #e43320;
			color: #fff;
			font-weight: 600;
			border-radius: 4px;
			margin: 30rpx;
			font-size: 28rpx;
		}
	}

	.editItem {
		.top {
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			background-color: #fff8f8;
			padding: 20rpx;

			text {
				color: #e43320;
			}
		}

		.bottom {
			padding: 20rpx;
		}
	}

	.all {
		display: flex;
		height: 30rpx;
		align-items: center;
		margin: 30rpx 0;
		margin-bottom: 40rpx;

		text {
			margin: 0 10rpx;
		}

		text:nth-child(3) {
			margin-right: auto;
		}

		.confirm {
			padding: 20rpx 25rpx;
			background-color: #e43320;
			color: #fff;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: 30rpx;
			border-radius: 8rpx;
		}
	}

	.list {
		padding-top: 20rpx;
		padding-bottom: 100rpx;
		background-color: #f4f4f4;
		width: 100vw;
		height: auto;
		min-height: 100vh;
	}



	.item {
		background-color: #fff;
		border-radius: 4px;
		width: 690rpx;
		margin: 0 auto;
		padding: 20rpx;
		display: flex;
		align-items: center;
		position: relative;

		.left {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			margin-right: 10rpx;
		}

		.right {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-right: auto;
			justify-content: center;

			.top {
				display: flex;
				margin-bottom: 30rpx;
				height: 40rpx;
				align-items: center;

				.name {
					margin-right: 20rpx;
				}

				.tel {
					color: #9b9b9b;
					font-size: 28rpx;
				}
			}

			.bumen {
				display: flex;
				justify-content: flex-start;
			}
		}

		.edit {
			margin-right: 50rpx;

			image {
				width: 50rpx;
				height: 50rpx;
				position: absolute;
				transform: translateY(-50%);
			}
		}
	}
</style>
